<template>
  <headPage :tabsIndex="1"></headPage>
  <div class="main_box content">
    <div class="navigate_view">
      <span class="navigate_text" @click="goBack">{{
        freecoursezone_zhuanqumingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="goBack">{{
        freeprofessionalmanagement_zhuanyemingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="goBack">详情</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text">职业素养</span>
      <span class="navigate_line">/</span>
      <span class="navigate_last_text">考试结果</span>
    </div>

    <div class="result_info" v-loading="loading">
      <img
        v-if="shifouhege == 1"
        class="info_1"
        src="../../assets/course/8.png"
        alt=""
      />
      <img v-else class="info_1" src="../../assets/course/19.png" alt="" />

      <div v-if="shifouhege == 1" class="info_2">考试通过</div>
      <div v-else class="info_2">考试失败</div>

      <div class="info_3">
        <div class="info_3_type">选择题</div>
        <div class="info_3_num">
          <span class="mum_1">题数：</span>
          <span class="mum_2">{{ topic_total_num }}</span>
        </div>
        <div class="info_3_err">
          <span class="err_1">错误数：</span>
          <span class="err_2">{{ mistake_num }}</span>
        </div>
        <div class="info_3_num margin_top">
          <span class="mum_1">正确率：</span>
          <span class="mum_2">{{ zhengquelv }}%</span>
        </div>
      </div>
      <div class="operation">
        <div class="operation_2" @click="goBack">返回课程</div>
        <div class="operation_1" @click="goCompetence" v-if="shifouhege != 1">
          重新考试
        </div>
        <div class="operation_1" @click="seeAnswer">查看解析</div>
      </div>
    </div>
  </div>
  <footerPage></footerPage>

  <!-- 查看解析 -->
  <maskLayer v-model="visible" center append-to-body>
    <div class="answer_sheet">
      <div class="sheet_title">
        <div class="sheet_title_le">
          <div class="le_item" @click="selectAnswer(1)">
            <div
              class="item_text"
              :class="answerType == 1 ? 'active_item_text' : ''"
            >
              正题解析
            </div>
            <div class="item_icon" v-if="answerType == 1"></div>
          </div>
          <div class="le_item" @click="selectAnswer(2)">
            <div
              class="item_text"
              :class="answerType == 2 ? 'active_item_text' : ''"
            >
              错题解析
            </div>
            <div class="item_icon" v-if="answerType == 2"></div>
          </div>
        </div>
        <img
          @click="closePopup"
          class="sheet_title_ri"
          src="../../assets/course/18.png"
          alt=""
        />
      </div>
      <div class="subject" v-loading="answerLoading">
        <el-scrollbar>
          <div class="subject_type">选择题</div>
          <template v-for="(item, index) in displayList" :key="index">
            <div class="subject_item">
              <div class="item_title">
                <span>{{ index + 1 }}、</span>
                <span>{{ item.timubiaoti }}</span>
              </div>
              <div class="item_other padding_left">
                <div class="item_img" v-if="item.timutupian">
                  <el-image fit="cover" :src="item.timutupian" :lazy="true" />
                </div>
                <div class="item_video" v-if="item.timushipin">
                  <el-image
                    fit="cover"
                    :src="item.timushipin.thumb"
                    :lazy="true"
                  />
                  <img
                    @click="seeVideo(item.timushipin.path)"
                    class="play_img"
                    src="../../assets/home/13.png"
                    alt=""
                  />
                </div>
              </div>

              <div
                class="options_item"
                v-for="(option_name, option_index) in item.timuxuanxiang"
                :key="option_index"
              >
                <img
                  v-if="option_name.isChange == 1"
                  class="options_choice"
                  src="../../assets/course/22.png"
                  alt=""
                />
                <img
                  v-if="option_name.isChange == 2"
                  class="options_choice"
                  src="../../assets/course/20.png"
                  alt=""
                />
                <img
                  v-if="option_name.isChange == 3"
                  class="options_choice"
                  src="../../assets/course/21.png"
                  alt=""
                />
                <div class="item_text">
                  <div class="letter">
                    <span>{{ letter[option_index] }}.</span>
                    <span>{{ option_name.xuanxiangbiaoti }}</span>
                  </div>
                  <div class="item_other">
                    <div class="item_img" v-if="option_name.xuanxiangtupian">
                      <el-image
                        fit="cover"
                        :src="option_name.xuanxiangtupian"
                        :lazy="true"
                      />
                    </div>
                    <div class="item_video" v-if="option_name.xuanxiangshipin">
                      <el-image
                        fit="cover"
                        :src="option_name.xuanxiangshipin.thumb"
                        :lazy="true"
                      />
                      <img
                        @click="seeVideo(option_name.xuanxiangshipin.path)"
                        class="play_img"
                        src="../../assets/home/13.png"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="answer_info">
              <div class="answer_title">
                <div class="title_icon"></div>
                <div class="title_text">答案解析</div>
              </div>
              <div class="answer_content">
                <div class="right_answer">
                  正确答案：{{ letter[item.rightKey] }}
                </div>
                <div class="right_answer" v-if="item.rightKey == item.myKey">
                  您的答案：{{ letter[item.myKey] }}
                </div>

                <div class="wrong_answer" v-else>
                  您的答案：{{ item.myKey !== "" ? letter[item.myKey] : "未选择" }}
                </div>
              </div>
              <div class="answer_img" v-if="item.tupianjiexi.length > 0">
                <div class="img_title">图片解析：</div>
                <div class="img_view">
                  <div
                    class="img_list"
                    v-for="(v, k) in item.tupianjiexi"
                    :key="k"
                  >
                    <el-image fit="cover" :src="v" :lazy="true" />
                  </div>
                </div>
              </div>
              <div class="answer_img" v-if="item.shipinjiexi">
                <div class="img_title">视频解析：</div>
                <div class="img_view_video">
                  <el-image
                    fit="cover"
                    :src="item.shipinjiexi.thumb"
                    :lazy="true"
                  />
                  <img
                    @click="seeVideo(item.shipinjiexi.path)"
                    class="play_img"
                    src="../../assets/home/13.png"
                    alt=""
                  />
                </div>
              </div>
              <div class="answer_img">
                <div class="img_title">文字解析：</div>
                <div class="img_view">
                  <div v-html="item.wenzijiexi"></div>
                </div>
              </div>
            </div>
          </template>
        </el-scrollbar>
      </div>
    </div>
  </maskLayer>

  <viewVideo :url="videoUrl" ref="videoText"></viewVideo>
</template>
    
<script name="courseMaterial" setup>
import { post6629f5ffcaf3a } from "@/utils/api.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import maskLayer from "@/components/maskLayer.vue";
import viewVideo from "@/components/viewVideo.vue";
import { ref, onMounted, reactive, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const injectMessage = inject("$message");

let course_id = ref(route.query.course_id); // 课程id
let freecoursezone_zhuanqumingcheng = ref(
  route.query.freecoursezone_zhuanqumingcheng
);
let freeprofessionalmanagement_zhuanyemingcheng = ref(
  route.query.freeprofessionalmanagement_zhuanyemingcheng
);
let freeprofessionalcompetence_id = ref(
  route.query.freeprofessionalcompetence_id
); // 素质id
let mistake_num = ref(route.query.mistake_num); // 错误数
let topic_total_num = ref(route.query.topic_total_num); // 总题数
let zhengquelv = ref(route.query.zhengquelv); // 正确率
let shifouhege = ref(route.query.shifouhege); // 是否合格

onMounted(() => {
  getData();
  viewParse();
});
// 获取答题结果
let loading = ref(true);
function getData() {
  setTimeout(() => {
    loading.value = false;
  }, 200);
}

// 查看解析
let displayList = ref([]);
let currect_list = ref([]); // 正确列表
let mistake_list = ref([]); // 错误列表

let letter = ref(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]);
function viewParse() {
  post6629f5ffcaf3a({
    freeprofessionalcompetence_id: freeprofessionalcompetence_id.value,
  })
    .then((res) => {
      console.log(res);
      if (res.code == 1) {
        answerLoading.value = false;
        currect_list.value = res.data.currect_list;
        mistake_list.value = res.data.mistake_list;
        if (currect_list.value.length > 0) {
          currect_list.value.forEach((v, k) => {
            v.rightKey = "";
            v.myKey = "";
            if (v.timuxuanxiang.length > 0) {
              v.timuxuanxiang.forEach((v1, k1) => {
                v1.isChange = 1;
                if (v1.xuanxiangbiaoti == v.yonghudaan) {
                  v.rightKey = k1;
                  v.myKey = k1;
                  v1.isChange = 2;
                }
              });
            }
          });
          displayList.value = currect_list.value;
        } else {
          displayList.value = [];
        }
        if (mistake_list.value.length > 0) {
          mistake_list.value.forEach((v, k) => {
            v.rightKey = "";
            v.myKey = "";
            if (v.timuxuanxiang.length > 0) {
              v.timuxuanxiang.forEach((v1, k1) => {
                v1.isChange = 1;
                if (v1.xuanxiangbiaoti == v.yonghudaan) {
                  v.myKey = k1;
                  v1.isChange = 3;
                }
                if (v1.xuanxiangbiaoti == v.zhengquedaan) {
                  v.rightKey = k1;
                  v1.isChange = 2;
                }
              });
            }
          });
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

let visible = ref(false);
function seeAnswer() {
  visible.value = true;
}
function closePopup() {
  visible.value = false;
}

let answerType = ref(1);
let answerLoading = ref(true);
const selectAnswer = (type) => {
  answerType.value = type;
  if (type == 1) {
    displayList.value = currect_list.value;
  } else {
    displayList.value = mistake_list.value;
  }
  setTimeout(() => {
    answerLoading.value = false;
  }, 200)
};
// 查看视频
let videoUrl = ref("");
let videoText = ref(null);
function seeVideo(url) {
  if (!url) {
    injectMessage.error("视频出错了，稍后再试");
    return;
  }
  videoUrl.value = url;
  videoText.value.openVideo();
}

function goBack() {
  router.go(-1);
}
// 重新考试
function goCompetence() {
  router.replace({
    path: "/competence",
    query: {
      course_id: course_id.value,
      freecoursezone_zhuanqumingcheng: freecoursezone_zhuanqumingcheng.value,
      freeprofessionalmanagement_zhuanyemingcheng:
        freeprofessionalmanagement_zhuanyemingcheng.value,
    },
  });
}
</script>
    
<style lang="scss" scoped>
.content {
  margin-top: 97px;
}
.navigate_view {
  display: flex;
  align-items: center;
  padding: 13.5px 0 12px 0;
  .navigate_text {
    font-size: 9px;
    color: #666;
    cursor: pointer;
  }
  .navigate_line {
    font-size: 9px;
    color: #bfbfbf;
    margin: 0 5px;
  }
  .navigate_last_text {
    font-size: 9px;
    color: #1f52ae;
    cursor: pointer;
  }
}
.result_info {
  background: #fff;
  text-align: center;
  padding: 50px 0 20px;
  margin-bottom: 20px;
  .info_1 {
    width: 40px;
    height: 40px;
  }
  .info_2 {
    font-size: 9px;
    font-weight: 500;
    margin-top: 12px;
  }
  .info_3 {
    margin: 25px auto 0;
    width: 210px;
    border-radius: 3px;
    background: #f6f7f9;
    padding: 29px 0;
    .info_3_type {
      font-size: 10px;
      font-weight: bold;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .info_3_num {
      display: flex;
      align-items: center;
      justify-content: center;
      .mum_1 {
        font-size: 9px;
        color: #999;
      }
      .mum_2 {
        font-size: 12px;
        font-weight: bold;
      }
    }
    .info_3_err {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      .err_1 {
        font-size: 9px;
        color: #999;
      }
      .err_2 {
        font-size: 12px;
        font-weight: bold;
        color: #ec695a;
      }
    }
    .margin_top {
      margin-top: 10px;
    }
  }
}
.operation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  .operation_1 {
    width: 120px;
    height: 24px;
    background: #1f52ae;
    border-radius: 3px;
    font-size: 8px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 10px;
    margin-left: 12px;
  }
  .operation_2 {
    border: 0.5px solid #1f52ae;
    width: 120px;
    height: 24px;
    background: #fff;
    border-radius: 3px;
    font-size: 8px;
    color: #1f52ae;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.answer_sheet {
  width: 440px;

  background: #fff;
  .sheet_title {
    padding: 8.5px 12px 8.5px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    .sheet_title_le {
      display: flex;
      align-items: center;
      .le_item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        position: relative;
        .item_text {
          font-size: 9px;
          font-weight: 500;
          cursor: pointer;
        }
        .active_item_text {
          color: #1f52ae;
          font-size: 9px;
          font-weight: bold;
        }
        .item_icon {
          width: 24px;
          height: 1.5px;
          position: absolute;
          bottom: -7px;
          left: 50%;
          transform: translateX(-50%);
          background: #1f52ae;
        }
      }
    }
    .sheet_title_ri {
      width: 10px;
      height: 10px;
      cursor: pointer;
    }
  }
}
.subject {
  background: #fff;
  padding: 0 16px 8px 16px;
  width: 440px;
  height: 350px;
  .subject_title {
    font-size: 12px;
    font-weight: bold;
  }
  .subject_type {
    display: inline-block;
    font-size: 7px;
    color: #1f52ae;
    padding: 4.5px;
    background: #f2f6fd;
    border-radius: 2px;
  }
  .subject_item {
    padding: 10px 0;
    .item_title {
      font-size: 8px;
    }
    .options_item {
      display: flex;
      // align-items: center;
      margin-top: 12px;
      .options_choice {
        transform: translateY(2.5px);
        width: 8px;
        height: 8px;
        margin-right: 5px;
        cursor: pointer;
      }
      .item_text {
        font-size: 8px;
        color: #666;
      }
      .letter {
        font-size: 8px;
        color: #666;
        margin-right: 1.5px;
      }
    }
  }
  .padding_left {
    padding-left: 13px;
  }
  .item_other {
    display: flex;
    margin-top: 5px;
    .item_img {
      width: 118px;
      height: 63px;
      margin-right: 8px;
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 2px;
      }
    }
    .item_video {
      width: 118px;
      height: 63px;
      position: relative;
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 2px;
      }
    }
  }
  .answer_info {
    background: #f6f7f9;
    border-radius: 3px;
    padding: 9px 0;
    .answer_title {
      display: flex;
      align-items: center;
      .title_icon {
        width: 2px;
        height: 7px;
        background: #1f52ae;
        border-radius: 0px 1px 1px 0px;
        margin-right: 6px;
      }
      .title_text {
        font-size: 8px;
        font-weight: bold;
      }
    }
    .answer_content {
      display: flex;
      margin-top: 12px;
      padding: 0 8px;
      .right_answer {
        color: #58bf71;
        font-size: 8px;
        font-weight: bold;
        margin-right: 5px;
      }
      .wrong_answer {
        color: #ec695a;
        font-size: 8px;
        font-weight: bold;
      }
    }
    .answer_img {
      display: flex;
      margin-top: 12px;
      padding: 0 8px;
      .img_title {
        width: 40px;
        font-size: 8px;
      }
      .img_view {
        flex: 1;
        font-size: 8px;
        color: #666;
        overflow: hidden;
        .img_list {
          float: left;
          margin: 0 8px 8px 0;
          width: 118px;
          height: 63px;
          position: relative;
        }
      }
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 2px;
      }
      .img_view_video {
        float: left;
        width: 118px;
        height: 63px;
        position: relative;
      }
    }
  }
}
.play_img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px !important;
  height: 18px !important;
  cursor: pointer;
}
</style>
    